<template>
    <div id="change-mobile">
        <h3>修改手机号</h3>
        <div class="now-mobile">你当前的手机号码：<span>{{mobile}}</span></div>
        <x-input  class="weui-vcode" v-model="mobileval" name="number" keyboard="number" ref="mobile01" is-type="china-mobile"  placeholder="请输入新手机号">
            <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/shouji@2x.png">
            <x-button v-bind:class="[start? 'vcode-inactive':'vcode-active']" slot="right" type="primary" @click.native="changeVScode" mini>{{setTime()}}</x-button>
            <countdown style="display:none" slot="right" :start="start" @on-finish="timeFinish" v-model="time"></countdown>
        </x-input>
          <x-dialog v-model="showHideOnBlur" class="dialog-demo image-code" hide-on-blur>
              <x-input :show-clear="false" placeholder="请输入图形验证码" v-model="imageCode" class="weui-cell_vcode ">
                  <img slot="label" src="../../../static/img/mima@2x.png" >
                  <img slot="right" @click="imgevent" class="weui-vcode-img" :src="urlImgCode + captchaid">
                </x-input>
            <div @click="confirmImgCode" class="confirm">
              <span>确定</span>
            </div>
          </x-dialog>
        <group class="mobile-verify">
            <x-input placeholder="请输入手机验证码" v-model="changeCode">
                <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/yanzhengma@2x.png">
            </x-input>
        </group>
        <div class="bot-change"><div class="share" @click="soult">提交</div></div>
    </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import { XInput, Group, XButton, Countdown, TransferDomDirective as TransferDom, XDialog } from 'vux'
import api from '../../api'
import utils from '../../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      time: 60,
      start: false,
      showHideOnBlur: false,
      mobile: '',
      mobileval: '',
      changeCode: '',
      imageCode: '', // 图片验证码
      urlImgCode: this.$store.state.imgvcode,
      captchaid: this.$store.state.captchaId
    }
  },
  components: {
    XInput,
    Group,
    XButton,
    Countdown,
    XDialog
  },
  created () {
    window.document.title = '修改手机号'
    this.mobile = utils.getQueryString('mobile')
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    imgevent () {
      this.captchaid = '00' + utils.randomString(32)
    },
    changeVScode () {
      if (this.mobileval === '') {
        this.$vux.toast.show({
          text: '手机号不能为空',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.start) {
        return
      } else {
        this.imageCode = ''
        this.showHideOnBlur = !this.showHideOnBlur
        this.captchaid = '00' + utils.randomString(32)
      }
    },
    confirmImgCode () {
      var tokenVal = utils.AnonToken(timeStamp)
      var params = {
        captcha: this.imageCode,
        captchaId: this.captchaid
      }
      var self = this
      if (this.imageCode === '') {
        this.$vux.toast.show({
          text: '请输入图形码',
          type: 'warn',
          width: '4rem'
        })
      } else {
        api.validcode(params).then(res => {
          if (res.status === '200') {
            this.showHideOnBlur = false
            self.start = true
            api.sendCode({
              token: tokenVal,
              timestamp: timeStamp,
              mobile: self.mobileval,
              type: 1,
              sendType: 4,
              from: 0,
              captcha: this.imageCode,
              captchaId: this.captchaid
            }).then(res => {
              console.log(res)
              if (res.status === '200') {
                self.$vux.toast.show({
                  text: res.message,
                  type: 'success',
                  width: '4rem'
                })
              } else {
                self.$vux.toast.show({
                  text: res.message,
                  type: 'warn',
                  width: '4rem'
                })
              }
            })
          } else {
            this.captchaid = '00' + utils.randomString(32)
            this.$vux.toast.show({
              text: '输入错误，请重新输入',
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    },
    soult () {
      if (this.mobileval === '') {
        this.$vux.toast.show({
          text: '手机号不能为空',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.$refs.mobile01.valid === false) {
        this.$vux.toast.show({
          text: '请输入正确手机号',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.changeCode === '') {
        this.$vux.toast.show({
          text: '请输入手机验证码',
          type: 'warn',
          width: '4rem'
        })
      } else {
        api.validate({
          token: this.tokenval,
          timestamp: timeStamp,
          mobile: this.mobileval,
          type: 1,
          sendType: 4,
          vcode: this.changeCode,
          from: 0
        }).then(res => {
          if (res.status === '200') {
            this.changeMobile()
          } else {
            this.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    },
    changeMobile () {
      api.changemobile({
        token: this.tokenval,
        timestamp: timeStamp,
        userId: this.$store.state.userID,
        vcode: utils.getQueryString('vscode'),
        newMobile: this.mobileval,
        newMobileVcode: this.changeCode
      }).then(res => {
        console.log(res)
        if (res.status === '200') {
          this.$router.push('/center/setting')
        } else {
          this.$vux.toast.show({
            text: res.message,
            type: 'warn',
            width: '4rem'
          })
        }
      })
    },
    setTime () {
      if (this.start) {
        return '重新发送(' + this.time + ')'
      } else {
        return '发送验证码'
      }
    },
    timeFinish () {
      this.start = false
      this.time = 60
    }
  }
}
</script>
